<script>
import PaperPreview from './PreviewView'
import { apiPage, apiRemove } from '@/api/paper'

export default {
  components: {
    PaperPreview
  },
  data() {
    return {
      tableList: [],
      total: 0,
      query: {
        pageNum: 1,
        pageSize: 10
      },
      preview: {
        title: '',
        visible: false,
      },
      upload: {
        visible: false,
        loading: false,
        url: process.env.VUE_APP_BASE_API + '/schoolCommon/upload',
        uploadSrc: '',
        headers: {
          Authorization: "Bearer " + getToken(),
          'Content-Type': 'multipart/form-data'
        },
        form: {
          title: '',
          data: null
        },
        rules: {
          title: [{ required: true, message: this.$locale('formMarkering.list.tip7') }]
        }
      }
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      apiPage(this.query.pageNum, this.query.pageSize).then(res => {
        console.log(res)
        this.total = res.data.total
        this.tableList = res.data.records
      })
    },
    handleCurrentChange(e) {
      this.query.pageNum = e
      this.initData()
    },
    handleSizeChange(e) {
      this.query.pageSize = e
      this.query.pageNum = 1
      this.initData()
    },
    handleRemove(e) {
      this.$confirm(this.$locale('formMarkering.list.tip1'), this.$locale('formMarkering.list.tip2'), () => {}, {
        confirmButtonText: this.$locale('formMarkering.list.tip3'),
        cancelButtonText: this.$locale('formMarkering.list.tip4'),
        type: 'warning'
      }).then(() => {
        apiRemove(e['id']).then(() => {
          this.$message.success(this.$locale('formMarkering.list.tip5'))
          this.initData()
        })
      })
    },
    handleModify(e) {
      sessionStorage.setItem('modifiedHtml', JSON.stringify(e))
      this.$router.push('/paper/paperDesign?type=modify')
    },
    handlePreview(e) {
      sessionStorage.setItem('documentHtml', e['testPaperContent'])
      this.preview.title = e['title']
      this.preview.visible = true
    },
    handleSave() {
      this.$router.push('/paper/paperDesign')
    },
    handleUpload() {
      this.upload.visible = true
      this.upload.form.title = ''
    },
    handleUploadSubmit() {
      this.$refs.refForm.validate((valid) => {
        if(valid) {
          const url = this.upload.url + '?title=' + this.upload.form.title
          this.upload.loading = true
          // this.$refs.refUpload.submit()
          axios({
            url,
            method: 'post',
            data: this.upload.form.data,
            processData:false,
            contentType:false,
            headers: this.upload.headers,
            responseType: "blob",
            dataType: 'json'
          }).then(res => {
            console.log(res)
            this.upload.loading = false
          })
        }
      })
    },
    handleCancel() {
      this.upload.visible = false
      this.$refs.refUpload.clearFiles()
      this.$refs.refForm.resetFields()
    },
    handleUploadImportance(option, success, fail) {
      this.$refs.refForm.validate((valid) => {
        if(!valid) {
          this.$refs.refUpload.clearFiles()
          this.$message.warning(this.$locale('formMarkering.list.tip6'))
        } else {
          this.upload.loading = true
          const data = new FormData()
          data.append('file', option.file)
          const url = this.upload.url + '?title=' + this.upload.form.title
          axios({
            url,
            method: 'post',
            data,
            processData:false,
            contentType:false,
            headers: this.upload.headers,
            responseType: "blob",
            dataType: 'json'
          }).then(res => {
            this.upload.loading = false
            this.initData()
            this.handleCancel()
          })
        }
      })
    }
  }
}
</script>

<template>
  <div class='paper-list-container'>
    <div style="display: flex; align-items: center; margin-bottom: 15px;">
      <el-button type='primary' @click='handleSave'>添加</el-button>
      <el-button type='primary' @click='handleUpload'>上传</el-button>
    </div>
    <el-table :data='tableList'>
      <el-table-column label='#' type='index' />
      <el-table-column :label="$locale('formMarkering.list.Guidebook')">
        <template slot-scope='scope'>
          <el-button type='text' @click="handlePreview(scope.row)">{{$locale('formMarkering.list.Guidebook')}}</el-button>
        </template>
      </el-table-column>
      <el-table-column :label="$locale('formMarkering.list.Guidebook Name')" prop='title' />
      <el-table-column :label="$locale('formMarkering.list.operate')">
        <template slot-scope='scope'>
          <a style='color: #b31236' @click="handleRemove(scope.row)">{{ $locale('formMarkering.list.delete') }}</a>
          <a style='color: #23a1fa; margin-left: 8px;' @click="handleModify(scope.row)">{{ $locale('formMarkering.list.edit') }}</a>
        </template>
      </el-table-column>
    </el-table>
    <div style='margin-top: 15px;'>
      <el-pagination :total='total' :page-sizes='[10, 20, 50, 100, 200]' :page-size='query.pageSize' :current-page='query.pageNum' @current-change='handleCurrentChange' @size-change='handleSizeChange' />
    </div>
    <el-dialog :visible.sync='preview.visible' :title=" $locale('formMarkering.list.Guide book viewing-') + preview.title" fullscreen>
      <paper-preview />
    </el-dialog>
    <el-dialog :visible.sync='upload.visible' v-loading='upload.loading' :title= "$locale('formMarkering.list.Guidebook upload')" width='460px'>
      <template #footer>
        <el-button @click='handleCancel'>{{ $locale('formMarkering.list.close') }}</el-button>
      </template>
      <el-form ref='refForm' :model='upload.form' :rules='upload.rules'>
        <el-form-item prop='title' :label="$locale('formMarkering.list.Guidebook Title')">
          <el-input v-model='upload.form.title' />
        </el-form-item>
        <el-form-item :label="$locale('formMarkering.list.Guidebook upload')">
          <el-upload ref='refUpload' :http-request='handleUploadImportance' :headers='upload.headers' accept='.rect' action=''>
            <el-button slot='trigger' type='primary'>{{ $locale('formMarkering.list.Upload') }}</el-button>
            <div slot="tip" class="el-upload__tip">{{ $locale('formMarkering.list.Only. cut files can be uploaded') }}</div>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<style lang='scss'>
.paper-list-container {
  padding: 15px;
}
</style>
